<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas class="glcanvas" width="640" height="480"></canvas>
    <script>
        /*
          webgl是要基于canvas画布来绘制画面的，
          通过调用getContext()方法传入webgl字符串，获得WebGL渲染上下文对下个你
        */
        const canvas = document.querySelector('.glcanvas')
        const gl = canvas.getContext('webgl')
        // 创建顶点
        const vertices = new Float32Array([
            0.0, 1.0,
            -1.0, -1.0,
            1.0, -1.0
        ]);
        // 创建顶点缓冲区，可用于存储顶点数据或着色数据
        const buffer = gl.createBuffer();
        // 把buffer绑定到WebGL的`ARRAY_BUFFER`目标上，接下来的操作将会作用在这个缓冲区上
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        // 使用 WebGL 的 bufferData() 方法将顶点数据 vertices 存储到当前绑定的缓冲区中。
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        // 定义顶点着色器
        const vertexShaderSource = `
      attribute vec2 aPosition;
      void main() {
        gl_PointSize = 20;
        gl_Position = vec4(aPosition, 0.0, 1.0);
      }
    `;
        // 定义片元着色器
        const fragmentShaderSource = `
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `;
        // 创建一个WebGLShader着色器对象，顶点着色器
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexShaderSource);
        gl.compileShader(vertexShader);
        // 创建一个WebGLShader着色器对象，片元着色器
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentShaderSource);
        gl.compileShader(fragmentShader);

        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        const positionLocation = gl.getAttribLocation(program, 'aPosition');
        gl.enableVertexAttribArray(positionLocation);
        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.POINTS, 0, 3);
    </script>
</body>

</html>